<template>
  <view class="job-select">
    <scroll-view class="job-parent" scroll-y="true">
      <view
        :class="['jp-item', { active: item.selfId === activeParent }]"
        v-for="(item, index) in zwOption"
        :key="index"
        @click="handleParent(item)"
        >{{ item.selfName }}</view
      >
    </scroll-view>
    <scroll-view class="job-child" scroll-y="true">
      <view
        :class="['jc-item', { active: item.selfId === activeChild }]"
        v-for="(item, index) in activeChildList"
        :key="index"
        @click="handleChild(item)"
      >
        {{ item.selfName }}
        <u-icon
          name="checkbox-mark"
          size="32"
          v-if="item.selfId === activeChild && postLevel == 2"
        ></u-icon>
      </view>
    </scroll-view>
    <scroll-view
      class="job-final u-border-left u-border-left-d9"
      scroll-y="true"
      v-if="postLevel == 3 && activeFinalList.length"
    >
      <view
        :class="['jf-item', { active: item.selfId === activeFinal }]"
        v-for="(item, index) in activeFinalList"
        :key="index"
        @click="handleFinal(item)"
      >
        {{ item.selfName }}
        <u-icon
          name="checkbox-mark"
          size="32"
          v-if="item.selfId === activeFinal"
        ></u-icon>
      </view>
    </scroll-view>
  </view>
</template>

<script>
// import postData from "@/utils/post.min";
import { getTradeZwCache } from "@/api/index";

export default {
  props: {
    formData: String,
    propList: [Array, String],
    tradeId: [String, Number],
  },
  data() {
    return {
      activeParent: "",
      activeChild: "",
      activeFinal: "",
      activeChildList: [],
      activeFinalList: [],
      zwOption: [],
      postLevel: this.$postLevel,
    };
  },
  watch: {
    tradeId: {
      handler(newVal) {
        this.getPostData(newVal);
      },
      immediate: true
    },
  },
  methods: {
    handleParent(item) {
      this.activeChildList = [];
      this.activeFinalList = [];
      this.activeParent = item.selfId;
      if (item.children && item.children.length) {
        this.activeChildList = JSON.parse(JSON.stringify(item.children));
      } else {
        this.$emit("confirm", [item.selfId, item.selfName], this.propList);
      }
    },
    handleChild(item) {
      this.activeChild = item.selfId;
      this.activeFinalList = [];
      if (item.children && item.children.length) {
        this.activeFinalList = JSON.parse(JSON.stringify(item.children));
      } else {
        this.$emit(
          "confirm",
          [item.selfId, item.selfName, this.activeParent],
          this.propList
        );
      }
    },
    handleFinal(item) {
      this.activeFinal = item.selfId;
      this.$emit(
        "confirm",
        [item.selfId, item.selfName, this.activeChild],
        this.propList
      );
    },
    getPostData(tradeId) {
      console.log('用tradeId获取职位分类数据', tradeId);
      
      let param = {
        tradeid: tradeId || this.$tradeId,
      };
      getTradeZwCache(param).then((res) => {
        
      console.log("请求返回了，结果是",res);
      
        if (res && +res.code === 200) {
          
      console.log("请求成功了，结果是",res.data);
      
          this.zwOption = res.data;
          this.initList();
        }
      });
    },

    initList() {
      if(this.formData) {
        let parent, child, activeChildList = [], activeFinalList = [];
        this.zwOption.forEach((item) => {
          if (item.children && item.children.length) {
            if (this.postLevel == 3) {
              item.children.forEach((ele) => {
                if (
                  ele.children &&
                  ele.children.find((e) => e.selfId == this.formData)
                ) {
                  parent = item.selfId;
                  child = ele.selfId;
                  activeChildList = item.children;
                  activeFinalList = ele.children;
                }
              });
            } else if (item.children.find((ele) => ele.selfId == this.formData)) {
              parent = item.selfId;
              child = this.formData;
              activeChildList = item.children;
            }
          }
        });
        this.activeParent = parent;
        this.activeChild = child;
        this.activeFinal = this.formData;
        this.activeChildList = activeChildList;
        this.activeFinalList = activeFinalList;
      }
      else if (this.zwOption.length) {
        // 默认打开第一项
        let parent = this.zwOption[0];
        this.activeParent = this.zwOption[0].selfId;
        this.activeChildList = parent.children && JSON.parse(JSON.stringify(parent.children));
        if (this.activeChildList && this.activeChildList[0].children) {
          this.activeChild = this.activeChildList[0].selfId;
          this.activeChild = "";
          this.activeFinalList = JSON.parse(
            JSON.stringify(this.activeChildList[0].children)
          );
        } else {
          this.activeChild = "";
        }
      }
    },
  },
};
</script>

<style lang="scss">
.job-select {
  display: flex;
  max-height: 100%;
  background: $uni-bg-color;
  .job-parent {
    flex-shrink: 0;
    padding: 20rpx 0 20rpx 24rpx;
    width: 27%;
    max-height: 100%;
    overflow: auto;
    background: $uni-bg-color-grey;
    .jp-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      border-radius: 16rpx 0 0 16rpx;
      &.active {
        background: $uni-bg-color;
      }
    }
  }
  .job-child {
    flex-grow: 1;
    padding: 20rpx 0;
    max-height: 100%;
    overflow: auto;
    .jc-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      &.active {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $u-type-primary;
      }
    }
  }
  .job-final {
    flex-grow: 1;
    padding: 20rpx 0;
    max-height: 100%;
    overflow: auto;
    .jf-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      &.active {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $u-type-primary;
      }
    }
  }
}
</style>